<template>
  <div class="head1">
    <div class="head-bg">
      <div class="head-name">可视化头部标题</div>
      <ul class="head-left">
        <li class="head-left-ele">
          <a class="pT10" style="display: block; color: #42f7f9;">首页</a>
        </li>
        <li class="head-left-ele on">
          <p class="pT10">菜单1</p>
        </li>

      </ul>
      <ul class="head-right">
        <li class="head-right-ele">
          <p class="pT10">菜单2</p>
        </li>
        <li class="head-right-ele">
          <p class="pT10">菜单3</p>
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.head1 .head-bg{background: url(~@/assets/images/head/head1/head_bg.png) no-repeat center top; width: 100%;height: 95px;text-align: center;position: relative;}
.head1 .head-name{
  background-image: linear-gradient(to bottom, #cdf7f9, #0cd9d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-top: 5px;
  font-size: 36px;
}
.head1 .head-left-ele{width: 170px;height: 42px;display: inline-block;background: url(~@/assets/images/head/head1/head_nav_bg.png); font-size: 16px;}
.head1 .head-left-ele.on{width: 170px;height: 42px;display: inline-block;background: url(~@/assets/images/head/head1/head_nav_bg_on.png);}
.head1 .head-left{position: absolute;top: 35px;left:calc(50% - 570px);cursor: pointer;}

.head1 .head-right-ele {width: 170px;height: 42px;display: inline-block;background: url(~@/assets/images/head/head1/head_nav_bg1.png); font-size: 16px;}
.head1 .head-right-ele.on{width: 170px;height: 42px;display: inline-block;background: url(~@/assets/images/head/head1/head_nav_bg1_on.png);}
.head1 .head-right{position: absolute;top: 35px;right:calc(50% - 570px);cursor: pointer;}

.head1 .head-left-ele:hover{background: url(~@/assets/images/head/head1/head_nav_bg_on.png);}
.head1 .head-right-ele:hover{background: url(~@/assets/images/head/head1/head_nav_bg1_on.png);}

.head1 .head-left li:last-child{
  margin-left: -28px;
}
.head1 .head-right li:last-child{
  margin-left: -28px;
}
</style>